<template>
  <div>
    <div class="div-content" style="">
      <div class="div-item" style="heigt: 100%">
        <div class="div-item-left">充值焕贝总额：</div>
        <div class="div-item-right">焕贝{{all||0}}</div>
      </div>
    </div>
    <Form ref="searchForm" @keydown.enter.native="Search" :model="searchForm" inline :label-width="70"
      class="search-form">
      <Form-item label="时间">
        <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable
          @on-change="selectDateChange" placeholder="选择起始时间" style="width: 200px">
        </DatePicker>
      </Form-item>
      <Button @click="Search" type="primary" icon="ios-search" class="search-btn">搜索</Button>
    </Form>
    <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
    <Row type="flex" justify="end">
      <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
        @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator
        show-sizer></Page>
    </Row>
  </div>
</template>

<script>
  import {
    PlantRechargeList,
    PlantRechargeAll
  } from "@/api/financial.js"
  export default {
    data() {
      return {
        all: 0,
        loading: false,
        selectDate: '',
        total: 0,
        searchForm: {
          // 搜索框初始化对象
          memberId: "admin",
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          startDate: "", // 起始时间
          endDate: "", // 终止时间
        },
        columns: [{
            title: '序号',
            type: "index",
            width: '80',
            align: 'center'
          }, {
            title: "时间",
            key: "createTime",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "充值金额",
            key: "yiBei",
            minWidth: 200,
            tooltip: true,
          },
          {
            title: "当前余额",
            key: "payeeAfterMoney",
            minWidth: 200,
            tooltip: true,
          },
        ],
        data: []
      }
    },
    created() {
      this.getDataList()
      PlantRechargeAll({}).then((res) => {
        this.all = res.result.rechargeMoneyAdmin
      })
    },
    methods: {
      getDataList() {
        PlantRechargeList(this.searchForm).then((res) => {
          this.loading = false;
          this.data = res.result.records;
          this.total = res.result.total;
        })
      },
      // 起止时间从新赋值
      selectDateChange(v) {
        if (v) {
          this.searchForm.startDate = v[0];
          this.searchForm.endDate = v[1];
        }
      },
      Search() {
        this.loading = true
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getDataList();
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = v;
        this.getDataList();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .div-content {
    width: 100%;
    height: 100%;
    display: flex;

    .div-item {
      line-height: 35px;
      display: flex;
      float: left;
      margin-right: 36px;
      font-size: 16px;
      font-weight: 600;

      >.div-item-left {}

      >.div-item-right {
        flex: 1;
        word-break: break-all;
      }
    }
  }
</style>
